<template lang="pug">
  div#balance
    span 剩余金额
    yd-progressbar(type='line', :progress='balance / amount',trail-width='4', trail-color='#AC0E0E')
    span {{balance|priceFilter}} / {{amount|priceFilter}}
</template>
<script>
export default {
  name: 'balance',
  props:["amount","balance"],
  filters:{
    priceFilter(price){
      return (price / 100).toFixed(2)
    }
  }
}
</script>

<style lang="stylus" scoped>
#balance{
  background-color: #fff;
  padding: .2rem;
  margin-bottom: .2rem;
  .yd-progressbar{
    margin: 0 .1rem;
    display: inline-block;
    width: 50%;
  }
}
</style>
<style lang="stylus">
#balance{
  .yd-progressbar{
    &>svg{
      border-radius: 4px;
    }
  }
}
</style>

